<template>
	<view class="mask flexC" v-show="load" :style="{background:background?'rgba(0, 0, 0, 0.5)':''}">
		<view class="warp">
			<view class="box flexC">
				<u-loading size="40" mode="circle"></u-loading>
				<text>{{msg}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			background:{
				type:Boolean,
				default:false
			},
			load:{
				type:Boolean,
				default:false
			},
			msg:{
				type:String,
				default:'加载中...'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mask{
		height: calc(100vh);
		width: calc(100vw);
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.box{
			min-height: 160rpx;
			width: 160rpx;
			padding: 20rpx;
			background-color: rgba($color: #000000, $alpha: .7);
			border-radius: 20rpx;
			justify-content: center;
			align-items: center;
			>text:last-child{
				color: #fff;
				margin-top: 10rpx;
			}
		}
	}
</style>
